<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getTaskList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="toSaveTask">新增</el-button>
                </el-form-item>
   
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="taskList" highlight-current-row v-loading="listLoading">

            <el-table-column prop="name" label="名称" width="300">
            </el-table-column>
            <el-table-column label="类别" :formatter='getTaskClassName' width="180">
t
            </el-table-column>


            <el-table-column label="开始时间" min-width="180" prop='startTime' :formatter="fmtDate">

            </el-table-column>
            <el-table-column label="结束时间" min-width="180" prop='endTime' :formatter="fmtDate">

            </el-table-column>

            <el-table-column label="状态" min-width="180" :formatter="fmtDate">

            </el-table-column>
            <el-table-column label="操作" width="80">
                <template scope="scope">
                    <el-button size="small" @click="toSaveTask(scope.$index, scope.row)">编辑</el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">

            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog :lock-scroll='true' size='full' title="编辑" v-model="ShowSave" :close-on-click-modal="false">
            <el-form :model="currObj" label-width="80px">
                <el-form-item label="任务名称">
                    <el-input v-model="currObj.name" auto-complete="off" placeholder='任务名称'></el-input>
                </el-form-item>
                <el-form-item label="任务类别">
                    <el-select v-model="currObj.taskClassId" placeholder="选择节点类别" @change='taskClassChange'>
                        <el-option v-for="taskClass in taskClassArray" :label="taskClass.name" :value="taskClass.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-autocomplete :fetch-suggestions="querySearchMember" placeholder="请输入内容" @select="selManager"></el-autocomplete>



                    <el-tag v-for="manager in  currObj.managers" :closable="true" type="success" @close="handleClose(manager,currObj.managers)">
                        {{manager.name}}
                    </el-tag>

                </el-form-item>

                <el-form-item label="参与人">
                    <el-autocomplete :fetch-suggestions="querySearchMember" placeholder="请输入内容" @select="selMember"></el-autocomplete>
                    <el-tag v-for="member in  currObj.members" :closable="true" type="success" @close="handleClose(member,currObj.members)">
                        {{member.name}}
                    </el-tag>
                </el-form-item>


                <el-form-item label="创建时间">
                    <el-date-picker v-model="currObj.createTime" type="datetime" placeholder="选择时间范围" align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="接受时间">
                    <el-date-picker v-model="currObj.startTime" type="datetime" placeholder="选择时间范围" align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="currObj.endTime" type="datetime" placeholder="选择时间范围" align="right">
                    </el-date-picker>
                </el-form-item>



            </el-form>
            <el-row>
                <taskInfo :currObj='currObj'></taskInfo>

            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="ShowSave = false">取消</el-button>
                <el-button type="primary" @click.native="saveTask">提交</el-button>
            </div>
        </el-dialog>


    </section>
</template>
<script src="./taskList.js"></script>

<style lang="scss" scoped>

</style>